<template>
  <div>
    <el-card class="cardbox" shadow="always">
      <div class="cardcontent clearfix">
        <div class="cardleft">
          <div class="cardleftyuan" style="background: #5BD171;">
            <svg-icon icon-class="hometu" style="font-size: 24px;color: #ffffff"></svg-icon>
          </div>
        </div>
        <div class="cardright">
          <p class="cardtit">查询SIM卡</p>
          <div class="carddes">根据卡号查询SIM卡属于哪一个供应商及当前卡状态。</div>
        </div>
      </div>
      <div class="cardfooter">
        <el-button class="footerbtn" type="text" @click="dialog=true">查询</el-button>
      </div>
    </el-card>
    <el-dialog title="查询SIM卡" :visible.sync="dialog" :close-on-click-modal="false" width="40%">
      <el-form ref="QueryForm" label-width="60px" :model="QueryForm">
        <div class="clearfix">
          <el-form-item label="ICCID:" style="float: left;width:300px;">
            <el-input v-model="QueryForm.iccid" placeholder="请输入卡号"></el-input>
          </el-form-item>
          <el-button style="float: left;margin-left: 15px" type="primary" icon="el-icon-search" @click="Query(true)">
            查询
          </el-button>
        </div>
        <div class="clearfix" v-if="dialogform">
          <div v-if="dialogform.mch_info">
            <div class="sim_title">绑定机器信息</div>
            <div>
              <div style="width: 50%;float: left">
                <p>客户帐号：{{ dialogform.mch_info.username }}</p>
                  <p>客户姓名：{{ dialogform.mch_info.name }}</p>
                    <p>客户电话：{{ dialogform.mch_info.tel }}</p>
                      <p>专属售后：{{ dialogform.mch_info.rk_username }}</p>
                        <p>是否在线：{{ dialogform.mch_info.mch_is_online == true?'是':'否' }}</p>
              </div>
              <div style="width: 50%;float: left">
                <p>机器id：{{ dialogform.mch_info.mch_id }}</p>
                  <p>机器sn：{{ dialogform.mch_info.mch_sn }}</p>
                    <p>机器名称：{{ dialogform.mch_info.mch_name }}</p>
                      <p>机器状态：{{ dialogform.mch_info.mch_state_str }} </p>

              </div>
            </div>
            <div style="clear:both"></div>
          </div>
          <div class="sim_title">物联网卡信息</div>
          <div>
            <div style="width: 50%;float: left">
              <p>ICCID：{{ dialogform.lot_card_info.iccid }}</p>
                <p>imsi：{{ dialogform.lot_card_info.imsi }}</p>
                  <p>msisdn：{{ dialogform.lot_card_info.msisdn }}</p>
                    <p>运营商：{{ dialogform.lot_card_info.carrier_name }}</p>
                      <p>物联网卡厂商：{{ dialogform.lot_card_info.card_service_provider_name }}</p>
                        <p>套餐名称：{{ dialogform.lot_card_info.plan_name }}</p>
                          <p>开机状态：{{ dialogform.lot_card_info.power_status_name }}</p>
                            <p>联网状态：{{ dialogform.lot_card_info.gprs_status_name }}</p>
            </div>
            <div style="width: 50%;float: left">
              <p>状态：{{ dialogform.lot_card_info.status_name }}</p>
                <p>激活时间：{{ dialogform.lot_card_info.start_date }}</p>
                  <p>过期时间：{{ dialogform.lot_card_info.expire_date }}</p>
                    <p>套餐用量：{{ dialogform.lot_card_info.used_data_volume }} <span v-if="dialogform.lot_card_info.used_data_volume">M</span></p>
                    <p>套餐大小：{{ dialogform.lot_card_info.total_data_volume }} <span v-if="dialogform.lot_card_info.total_data_volume">M</span></p>
                    <p>当月用量：{{ dialogform.lot_card_info.data_usage }} <span v-if="dialogform.lot_card_info.data_usage">M</span></p>
                    <p>apn：{{ dialogform.lot_card_info.apn }}</p>
            </div>
          </div>
        </div>
        <p v-else style="text-align: center">暂无数据</p>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        QueryForm: {
          iccid: '',
        },
        dialog: false,
        dialogform: {
          mch_info: {
            
          },
          lot_card_info: {},
        },
        temp: '1111'
      };
    },
    methods: {
      Query() {
        this.$refs['QueryForm'].validate((valid) => {
          if (valid) {
            //this.$get(this.$rkapi + '/lot_card/get_card_info', this.QueryForm)
            this.$get(this.$rkapi + '/lot_card/get_mch_and_card_info_by_iccid', this.QueryForm)
              .then((res) => {
                if (res.code === 0) {
                  this.dialogform = res.data;
                  console.log(this.dialogform)
                  //lot_card_info
                  if(this.dialogform.used_data_volume) {
                    this.dialogform.used_data_volume = res.data.used_data_volume.toFixed(2)
                  }
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                  });
                }
              })
          }
        })
      },
    }
  }
</script>
<style>
  .sim_title {
    font-size: 20px;
    font-weight: 600;
  }
</style>